<template>
    <h2>权益新增</h2>
    <table class="table table-bordered">
        <tr>
            <td>权益名称</td>
            <td>
                <input type="text" v-model="info.qname"/>
            </td>
        </tr>
        <tr>
            <td>图标</td>
            <td>
                <img :src="info.image" style="width: 70px;height: 70px;"/>
                <input type="file" @change="upload"/>
            </td>
        </tr>
        <tr>
            <td>状态</td>
            <td>
                <input type="radio" :value="true" v-model="info.state"/>可用
                <input type="radio" :value="false" v-model="info.state"/>不可用
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="修改" class="btn btn-info" @click="Add" />
            </td>
        </tr>
    </table>
    </template>
    <script setup lang="ts">
    import {ref,onMounted} from 'vue'
    import axios from 'axios'
    import { useRouter,useRoute } from 'vue-router';
    const router=useRouter()
    const route=useRoute()
    
    
    const info=ref({
        qid:0,
        qname:'',
        image:'',
        state:true
    })
    onMounted(()=>{
        axios.get('https://localhost:7279/api/Quanyi/GetQuanyi',{
            params:{
                id:route.params.id
            }
        })
        .then(res=>{
            info.value=res.data
        })
    })
    
    //上传图片
    const file=ref('')
    const upload=(e:any)=>{
        file.value=e.target.files[0]
        if(!file.value){
            alert('请选择图片')
            return
        }
        const formdata=new FormData()
        formdata.append('file',file.value)
        axios.post('https://localhost:7279/api/File/UpLoad',formdata)
        .then(res=>{
            if(res.data.code==1){
                alert(res.data.message)
            }
            else if(res.data.code==2){
                alert(res.data.message)
            }
            else if(res.data.code==3){
                alert(res.data.message)
                info.value.image=res.data.path
            }
            else{
                alert('上传失败')
            }
        })
        .catch(err=>{
            console.log(err)
        })
    }
    
    const Add=()=>{
        var obj={
            qid:route.params.id,
            qname:info.value.qname,
            image:info.value.image,
            state:info.value.state
        }
        axios.put('https://localhost:7279/api/Quanyi/QuanyiUpd',obj)
        .then(res=>{
            if(res.data==-1){
                alert('权益名称不能重复')
            }
            else if(res.data>0){
                alert('修改成功')
                router.push('/QuanyiShow')
            }
            else{
                alert('修改失败')
            }
        })
    }
    
    </script>